<template>
	<view class="page_box">
		<u-navbar :is-back="true" title=" " v-if="1" :border-bottom="false" id="navbarr">
			<view>
				<text class="text-bold f34" style="margin-right: 10rpx;">成都</text>
				<u-icon name="arrow-down" color="#232323" size="24"></u-icon>
			</view>
			<view class="search-content margin-left-sm">
				<u-search 
					placeholder="搜索关键词...." 
					v-model="search_model"
					:show-action="false"
					 height="68"
					 bg-color="#f4f4f4"
					 color="#333333"
					 placeholder-color="#A0A0A0"
					 search-icon-color="#A0A0A0"
					 :clearabled="false"
					 @search="searchBind"
				>
				</u-search>
			</view>
		</u-navbar>

		<view class="content_box">
			<view class="padding">
				<u-swiper :list="imglist" mode="round" indicator-pos="bottomCenter" border-radius="20" height="300"></u-swiper>
			</view>
			<view class="cloum-list flex justify-between">
				<navigator :url="item.url" hover-class="none" class="list-item" v-for="(item, index) in cloum_list" :key="index">
					<image :src="item.img"></image>
					<text class="list-name text-center">{{ item.name }}</text>
				</navigator>
			</view>
			<view :class="unfold?'decoration-list decoration-list-active':'decoration-list'">
				<view class="screen-content" :style="{top:navbar_height+'px'}">
					<u-dropdown
						ref="uDropdown"
						@open="open"
						@close="close"
						active-color="#FBB03B"
						inactive-color="#717171"
						menu-icon="arrow-down-fill"
						menu-icon-size="16"
					>
						<u-dropdown-item
							v-for="(item, index) in screen_list" :key="index"
							:title="item.name"
							:options="item.content"
							v-model="down_value"
							class="dropdow-item"
							@change="downChange(item.name)"
						></u-dropdown-item>
					</u-dropdown>
				</view>
				<view class="decoration-hall-list">
					<navigator url="./case_details" hover-class="none" class="item" v-for="(item, index) in decoration_list" :key="index">
						<view class="item-img"><image :src="item.img" class="img"></image></view>
						<view class="hidden">{{ item.title }}</view>
						<view class="tips-cont hidden">{{ item.tips }}</view>
						<view class="text-bot-cont flex justify-between">
							<view class="user-detail flex align-center">
								<view class="cu-avatar"><image :src="item.avatar" class="img"></image></view>
								<text class="username hidden">{{ item.username }}</text>
							</view>
							<view class="flex align-center" @click="Collection(index)">
								<i :class="item.iscollect ? 'cuIcon-likefill' : 'cuIcon-like'"></i>
								<text class="sc-text">{{ item.collectNum }}</text>
							</view>
						</view>
					</navigator>
				</view>
			</view>
		</view>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			search_model:'',
			down_value:'',
			unfold:false,
			imglist:[
				"https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/banner.png",
				"https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/banner.png"
			],
			cloum_list: [
				{
					name: '我要装修',
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_wyzx.png',
					url:"../iWantToDecorate/iWantToDecorate"
				},
				{
					name: '案例库',
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
					url:"./case_base"
				},
				{
					name: '建材库',
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_jck.png',
					url:"../building_materials/building_materials"
				}
			],
			screen_list: [
				{
					name: '排序',
					content: [
						{
							label: '最新',
							value: 1
						},
						{
							label: '点赞最多',
							value: 2
						},
						{
							label: '同城优先',
							value: 3
						}
					]
				},
				{
					name: '预算',
					content: [
						{
							label: '3万以下',
							value: 1
						},
						{
							label: '3-5万',
							value: 2
						},
						{
							label: '5-8万',
							value: 3
						},
						{
							label: '8-12万',
							value: 4
						},
						{
							label: '18-20万',
							value: 5
						},
						{
							label: '20万以上',
							value: 6
						}
					]
				},
				{
					name: '房型',
					content: [
						{
							label: '别墅',
							value: 1
						},
						{
							label: '大平层',
							value: 2
						},
						{
							label: '四室',
							value: 3
						},
						{
							label: '三室',
							value: 4
						},
						{
							label: '两室',
							value: 5
						},
						{
							label: '一室',
							value: 6
						}
					]
				},
				{
					name: '类型',
					content: [
						{
							label: '毛胚房',
							value: 1
						},
						{
							label: '翻新放',
							value: 2
						},
						{
							label: '局部装',
							value: 3
						},
						{
							label: '整装',
							value: 4
						}
					]
				}
			],
			decoration_list: [
				{
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/list.png',
					title: '现代简约低奢风小户型',
					tips: '现代|三居|200m²',
					avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
					username: '艾福西西',
					iscollect: false,
					collectNum: 256
				},
				{
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/list.png',
					title: '现代简约低奢风小户型',
					tips: '现代|三居|200m²',
					avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
					username: '艾福西西',
					iscollect: true,
					collectNum: 257
				},
				{
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/list.png',
					title: '现代简约低奢风小户型',
					tips: '现代|三居|200m²',
					avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
					username: '艾福西西',
					iscollect: false,
					collectNum: 256
				},
				{
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/list.png',
					title: '现代简约低奢风小户型',
					tips: '现代|三居|200m²',
					avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
					username: '艾福西西',
					iscollect: true,
					collectNum: 257
				}
			],
			istransparet: true,
			navbar_height:0,
		};
	},
	onShow() {},
	onLoad(e) {},
	mounted() {
		const query = uni.createSelectorQuery().in(this);
		query.select('#navbarr').boundingClientRect(data => {
			this.navbar_height = data.height
		}).exec();
	},
	methods: {
		searchBind(e){
			console.log(e)
		},
		Collection(index) {
			this.decoration_list[index].iscollect = !this.decoration_list[index].iscollect;
			this.decoration_list[index].iscollect
				? (this.decoration_list[index].collectNum += 1)
				: (this.decoration_list[index].collectNum -= 1);
		},
		downChange(e){
			console.log(e)
		},
		open(index) {
			this.$refs.uDropdown.highlight();
			this.unfold = true
		},
		close(index) {
			this.$refs.uDropdown.highlight(index);
			this.unfold = false
		},
	}
};
</script>

<style lang="scss" scoped>
.search-content {
	/deep/.u-input{
		font-size: 24rpx !important;
	}
}
.content_box {
	.cloum-list {
		width: 100%;
		padding: 20rpx 60rpx 40rpx;
		border-bottom: 20rpx solid #f8f8f8;
		.list-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			image {
				width: 100rpx;
				height: 100rpx;
			}
			.list-name {
				font-size: 26rpx;
				margin-top: 16rpx;
			}
		}
	}
	.screen-content {
		.screen-item {
			font-size: 28rpx;
			color: #717171;
		}
		padding: 30rpx 40rpx;
		.scree-item,
		.cuIcon-triangledownfill {
			font-size: 28rpx;
			color: #717171;
		}
		/deep/.uni-scroll-view{
			background: white !important;
			padding: 20rpx 0;
		}
	}
	.decoration-hall-list {
		padding: 10px 16rpx;
		overflow: hidden;
		.item {
			width: 50%;
			float: left;
			padding: 0 14rpx;
			margin-bottom: 38rpx;
			.item-img {
				height: 240rpx;
				margin-bottom: 20rpx;
				width: 100%;
				border-radius: 10rpx;
				overflow: hidden;
				.img {
					width: 100%;
					height: 100%;
				}
			}
			.tips-cont {
				margin-top: 18rpx;
				color: #ffb81e;
				font-size: 24rpx;
			}
			.text-bot-cont {
				.user-detail {
					width: 65%;
				}
				.cu-avatar {
					width: 40rpx;
					height: 40rpx;
					overflow: hidden;
					border-radius: 50%;
					.img {
						width: 100%;
						height: 100%;
					}
				}
				.username {
					font-size: 24rpx;
					color: #999999;
					margin-left: 9rpx;
					width: 80%;
				}
				.sc-text {
					margin-left: 10rpx;
					font-size: 24rpx;
				}
				margin-top: 19rpx;
				.cuIcon-likefill {
					color: red;
				}
			}
		}
	}
	.decoration-list-active {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: white;
		z-index: 99;
		.screen-content {
			width: 100%;
			position: fixed;
			background: white;
			z-index: 9999;
			padding: 20rpx 0;
		}
		/deep/.dropdow-item > view {
			background: white !important;
			padding-bottom: 20rpx;
		}
		/deep/.u-cell {
			width: 30%;
			float: left;
			overflow: hidden;
			text-align: center;
			line-height: 50rpx !important;
			background: #f7f7f7 !important;
			border-radius: 10rpx;
			margin: 20rpx 12rpx;
			padding: 0;
			display: flex;
			justify-content: center;
		}
		/deep/.u-cell_title {
			width: 100% !important;
			text-align: center;
			color: #717171;
			font-size: 26rpx;
		}
		/deep/.u-dropdown__content__mask{
			position: fixed !important;
			top: 290rpx;
		}
		/deep/.u-dropdown__menu__item{
			background: white;
		}
	}
}
</style>
